import { PageContainer } from '@ant-design/pro-layout';
import type { FormInstance } from 'antd';
import { Segmented } from 'antd';
import { message } from 'antd';
import { Button, Divider } from 'antd';
import { useReducer, useRef, useState } from 'react';
import type { ProColumns } from '@ant-design/pro-components';
import { ProFormSelect } from '@ant-design/pro-components';
import { ModalForm, ProFormDateTimePicker, ProFormText } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import styles from './index.less';
import type { RangePickerProps } from 'antd/lib/date-picker';
import { DatePicker } from 'antd';
import moment from 'moment';
import type { orderList } from './types';
import { getOrderTable, overPark } from './service';
import { useModel } from 'umi';
import Detail from './mainContent/detail';
import type { ActionType } from '@ant-design/pro-table';
import { AppstoreOutlined, BarsOutlined, PlusOutlined } from '@ant-design/icons';
import Add from './mainContent/add';

export default () => {
  const disabledDate: RangePickerProps['disabledDate'] = (current) => {
    // Can not select days before today and today
    return current && current > moment().endOf('day');
  };
  const actionRef = useRef<ActionType>();
  const { initialState } = useModel('@@initialState');
  const currUser = initialState?.currentUser;
  const tenantId = currUser?.tenantId;
  const formRef = useRef<FormInstance>();
  const [detailId, setDetailId] = useState<string>();
  const [pageName, setPageName] = useState<string>('优惠券列表');
  const [configCard, setConfigCard] = useState<boolean>(false);
  const [passVisible, setPassVisible] = useState<boolean>();

  const [outVisible, setOutVisible] = useState<boolean>(false);

  const columns: ProColumns<orderList>[] = [
    {
      title: '券ID',
      dataIndex: 'orderNo',
      hideInForm: true,
      hideInSearch: true,
    },
    {
      title: '批次号',
      dataIndex: 'zoneName',
      hideInForm: true,
      hideInSearch: true,
    },
    {
      title: '优惠券名称',
      dataIndex: 'carAttributes',
      hideInSearch: false,
    },
    {
      title: '优惠券类型',
      dataIndex: 'plateNumber',
      hideInSearch: true,
    },
    {
      title: '核销请求单号',
      dataIndex: 'finishedStatus',
      hideInSearch: false,
    },
    {
      title: '关联商户订单号',
      dataIndex: 'totalAmount',
      hideInSearch: true,
      render: (_, record) => {
        if (record) return <div>{Number(record.totalAmount).toFixed(2)}</div>;
      },
    },
    {
      title: '券状态',
      dataIndex: 'paymentStatus',
      hideInSearch: false,
      valueEnum: {
        0: '未结算',
        1: '未支付',
        2: '已结清',
        5: '已退款',
        6: '部分退款',
        7: '未结清',
        10: '免费',
      },
    },
    {
      title: '开始时间',
      dataIndex: 'beginTime',
      hideInSearch: false,
      renderFormItem: () => {
        return (
          <DatePicker.RangePicker
            showTime
            placeholder={['请选择时间', '请选择时间']}
            disabledDate={disabledDate}
          />
        );
      },
    },
    {
      title: '过期时间',
      dataIndex: 'endTime',
      hideInSearch: false,
      renderFormItem: () => {
        return (
          <DatePicker.RangePicker
            showTime
            placeholder={['请选择时间', '请选择时间']}
            disabledDate={disabledDate}
          />
        );
      },
    },
    {
      title: '核销时间',
      dataIndex: 'endTime',
      hideInSearch: false,
      renderFormItem: () => {
        return (
          <DatePicker.RangePicker
            showTime
            placeholder={['请选择时间', '请选择时间']}
            disabledDate={disabledDate}
          />
        );
      },
    },
    {
      fixed: 'right',
      title: '操作',
      hideInSearch: true,
      render: (_, record) => {
        return (
          <>
            <a
              onClick={() => {
                setOutVisible(true);
                setDetailId(record.id);
              }}
            >
              优惠券投放
            </a>
            <Divider type="vertical" />
            <a
              onClick={() => {
                setDetailId(record.id);
                setPassVisible(true);
              }}
            >
              数据统计
            </a>
          </>
        );
      },
    },
  ];
  return (
    <PageContainer title={'优惠券列表'}>
      <ProTable<any>
        actionRef={actionRef}
        rowKey="parkingOrderId"
        columns={columns}
        scroll={{ x: true }}
        style={{ whiteSpace: 'nowrap' }}
        columnEmptyText="-"
        headerTitle="订单列表"
        pagination={{
          size: 'default',
          showQuickJumper: true,
          showSizeChanger: true,
          defaultPageSize: 10,
        }}
        toolBarRender={() => [
          <Button key="button" icon={<PlusOutlined />} type="primary" onClick={async () => {}}>
            添加
          </Button>,
        ]}
        request={async (param) => {
          const res: any = await getOrderTable(param);
          return { ...res, data: res.data.list, success: true, total: res.data.total };
        }}
      />
    </PageContainer>
  );
};
